<template>
  <div class="vue-subsystem-node-wrapper" :class="selected ? 'selected' : ''">
    <div class="body"></div>
    <div class="footer">
      <div class="title" v-show="!isEditing" @click="handleClick">
        <span>{{ name }}</span>
      </div>
      <input
        type="text"
        class="change-input"
        ref="nameInput"
        v-if="isEditing"
        :value="name"
        @blur="handleNameChange"
        @keyup.enter="handleNameChange"
      />
    </div>
  </div>
</template>

<script>
import EventBus from "../../../event-bus/index";
import BusEvents from "../../../event-bus/event-types";

export default {
  name: "vue-editable-node",
  inject: ["getGraph", "getNode"],
  data() {
    return {
      isEditing: false,
      nodeData: this.getNode().getData(),
      name: this.getNode().getData().name,
      handleClick: this.handlePseudoDbClick(),
    };
  },
  computed: {
    selected() {
      return this.nodeData.selected;
    },
  },
  methods: {
    handleRightClick() {
      this.isEditing = true;
      this.$nextTick(() => {
        const oInput = this.$refs.nameInput;
        oInput.focus();
        oInput.select();
      });
    },
    handlePseudoDbClick() {
      let prev = Date.now();
      let clickCount = 0;
      return () => {
        let now = Date.now();
        // 点击间隔小于 300ms 或 超过 800ms, 则重新开始计次
        if (now - prev > 800 || now - prev < 300) {
          clickCount = 1;
        } else {
          clickCount = 2;
        }

        prev = now;
        if (clickCount === 2) {
          // 执行代码
          this.handleRightClick();
        }
      };
    },
    handleNameChange() {
      this.isEditing = false;
      const newVal = this.$refs.nameInput.value;
      if (this.name !== newVal) {
        this.name = newVal;
        this.getNode().getData().name = newVal;
        // todo: 更新 id2nameMap 上的名字
        const id = this.getNode().id;
        EventBus.$emit(BusEvents.INTERACT_UPDATE_ID2NAME_MAP, {
          id,
          name: newVal,
        });
      }
    },
  },
};
</script>

<style lang="less">
.vue-subsystem-node-wrapper {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  background: linear-gradient(to top, transparent, transparent 20px, #444 20px);
  overflow: hidden;

  &.selected {
    border: 1px solid rgb(154, 205, 50);
    box-shadow: 0 0 2px 2px rgba(154, 205, 50, 0.4);
  }

  display: flex;
  flex-direction: column;

  .body {
    width: 100%;
    flex: 1;
    border: 1px solid #2c3539;
    border-radius: 4px;
    // background-color: #444;
  }

  .footer {
    width: 100%;
    height: 20px;
    padding-top: 4px;
    // background-color: rgba(105, 105, 105, 0.4);
    // background-color: transparent;

    display: flex;
    justify-content: center;
    align-items: center;

    .title {
      height: 16px;
      width: 80%;
      line-height: 16px;
      font-size: 16px;
      color: white;

      text-align: center;
    }

    .change-input {
      height: 16px;
      width: 80%;
      border: 1px solid #dcdfe6;
      border-radius: 2px;
      outline: none; /* 修改原有的边框样式 */

      &:focus,
      &:focus-visible {
        border: 1px solid #409eff;
        border-radius: 2px;
      }
    }
  }
}
</style>
